<template>
	<view :style="shellStyle" style="">
		<!-- <text  style="line-height: 1.6;" v-html="showText"></text> -->
		<u-parse class="text" :content="showText"></u-parse>
		<!-- <view class="cursor" :style="cursorStyle"></view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataText: "",
				showText: "",
				index: 0,
				timer: null,
				cursonTimer: null,
				shellStyle: {
					width: "100%",
					height: "100%",
					fontSize: this.fontSize+"px",
					color: this.color,
				},
				cursorStyle: {
					display: "none",
					borderRight: "6px solid "+this.cursorColor,
				},
			};
		},
		props:{
			fontColor:{
				type:String,
				default:'#545454'
			},
			fontSize:{
				type:Number,
				default:15
			},
			cursorColor:{
				type:String,
				default:'#000'
			}
		},
		mounted() {
			
		},
		methods: {
			input(text) {
				
				this.dataText += text;
				const textArr = this.dataText.split('');

				const auto = () => {
					this.cursorStyle.display = "inline";
					clearInterval(this.cursonTimer);
					const showText = textArr.slice(0, this.index).join('')
						.replace(/<\/br>/ig, '</br>> ')

					this.showText = showText;
				
					this.showText = showText.replace(/[**]/g, '"').replace(/[###]/g, '')
					console.log(this.showText)
					this.timer = setTimeout(auto, 100);
					var current = text.substr(this.index, 1);
					if (current === "<") {
						this.index = text.indexOf(">", this.index) + 1;
					} else {
						this.index++;
					}
					if (this.index > textArr.length) {
						clearTimeout(this.timer);
						this.cursonTimer = setInterval(() => {
							if (this.cursorStyle.display === "none") {
								this.cursorStyle.display = "inline";
							} else {
								this.cursorStyle.display = "none";
							}
						}, 500);
					}
				};

				this.timer = setTimeout(auto, 100);
			},
		},
	};
</script>



<style>

	@keyframes typing {
		from {
			width: 0
		}
	}

	@keyframes caret {
		50% {
			border-right-color: transparent;
		}
	}

	
</style>